<script lang="ts" setup>
import type { DataFormOptionsProps } from '#/components/data-form';

import { ref } from 'vue';

import { service } from '#/api/request';
import { DataForm } from '#/components/data-form';

import { useForm } from './data';

const dataFormRef = ref<InstanceType<typeof DataForm>>();
const enums = ref<{
    defaultFileDatabaseId: [{ [key: string]: any }] | undefined;
}>({
    defaultFileDatabaseId: undefined,
});
const isAdding = ref(false);
const databaseFormRef = ref();
const database = ref<any>({
    name: '',
    path: '',
    maxLimit: 100,
    description: '',
});
const { repositoryFields, rules } = useForm();

const onAddOption = (value: boolean) => {
    isAdding.value = value;
    if (!value) {
        databaseFormRef.value?.resetFields();
    }
};

const onConfirm = () => {
    databaseFormRef.value?.validate((valid: boolean) => {
        if (valid) {
            service.post('/system/file/database', { ...database.value }).then(({ data }) => {
                enums.value.defaultFileDatabaseId?.push(data);
                onAddOption(false);
            });
        }
    });
};

const open = (options: DataFormOptionsProps) => {
    service.get('/system/file/database').then(({ data }) => {
        if (data) {
            enums.value.defaultFileDatabaseId = data.rows ?? [];
            dataFormRef.value?.open(options);
        }
    });
};

defineExpose({ open });
</script>

<template>
    <DataForm ref="dataFormRef" :fields="repositoryFields" :rules="rules" api="/system/file/repository" title="文件仓">
        <template #defaultFileDatabaseId="{ form }">
            <el-select v-model="form.defaultFileDatabaseId">
                <el-option v-for="item in enums.defaultFileDatabaseId" :key="item.id" :label="item.name" :value="item.id">
                    <span style="float: left">{{ item.name }}</span>
                    <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px"> {{ item.path }} </span>
                </el-option>
                <template #footer>
                    <div v-if="!isAdding" class="flex-center">
                        <el-button v-auth="'system:file:database:add'" link @click="onAddOption(true)" />
                    </div>
                    <div v-else>
                        <el-form ref="databaseFormRef" :model="database" label-width="50">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="名称" prop="name" style="margin-bottom: 10px">
                                        <el-input v-model="database.name" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="阈值" prop="maxLimit" style="margin-bottom: 10px">
                                        <el-input-number v-model="database.maxLimit" :min="100" :max="1000" :step="100" style="width: 100%" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-form-item label="路径" prop="path" style="margin-bottom: 10px">
                                <el-input v-model="database.path" />
                            </el-form-item>
                            <el-form-item label="描述" prop="description" style="margin-bottom: 10px">
                                <el-input v-model="database.description" />
                            </el-form-item>
                        </el-form>
                        <div class="flex-center">
                            <el-button type="primary" @click="onConfirm()">确定</el-button>
                            <el-button type="danger" @click="onAddOption(false)">取消</el-button>
                        </div>
                    </div>
                </template>
            </el-select>
        </template>
    </DataForm>
</template>
